 /*
 * @description: 平台财控计划
 * @Author: along
 * @Date: 2021-07-07
 * @Last Modified by:
 * @Last Modified time: 2021-07-07
 */
<template>
    <div class="container platformControl">
        <div class="__nav">
            <p class="__nav_title">
                平台财控计划
            </p>
        </div>
        <!-- header -->
        <div class="header-nav">
            <div class="header_left">
                <div class="__info">
                    <p class="__info_title">计划名称</p>
                    <el-input
                        v-model="formData.keyword"
                        placeholder="请输入计划名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        :style="{width: '406px'}"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">启用状态</p>
                    <el-select
                        v-model="formData.status"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <el-button
                type="primary"
                :style="{width: '152px'}"
                @click="handleCreatePlan()"
                size="medium"
            >
                <i
                    class="iconfont el-icon-hand-iconjia"
                    :style="{marginRight: '10px'}"
                />
                创建计划
            </el-button>
        </div>
        <!-- /header -->

        <!-- table -->
        <div class="__wrap">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="platformControl"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="title"
                    label="计划名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="start_time"
                    label="平台补贴预算计划时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="300"
                >
                    <template slot-scope="scope">
                        {{ scope.row.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }} - {{ scope.row.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="money"
                    label="计划预算总金额"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        {{ scope.row.money }}元
                    </template>
                </el-table-column>
                <el-table-column
                    prop="freeze_money"
                    label="占用总额度"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        {{ scope.row.freeze_money }}元
                    </template>
                </el-table-column>
                <el-table-column
                    prop="used_money"
                    label="消耗总额度"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        {{ scope.row.used_money }}元
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="启用状态"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        <div class="__flex">
                            <p
                                class="__flex_status"
                                :style="{background: scope.row.status == 1 ? 'rgba(76, 217, 100, 1)' : 'rgba(255, 48, 48, 1)'}"
                            />
                            <p class="__flex_text">
                                {{ scope.row.status == 1 ? '已启用' : '已禁用' }}
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="left"
                    :width="170"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleCheckDetail(scope.row.control_no, 'check')"
                        >
                            查看
                        </el-button>
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleCheckDetail(scope.row.control_no, 'edit')"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleSet(scope.row)"
                        >
                            {{ scope.row.status ? '禁用' : '启用' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>

        <!-- 岗位创建提示弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialog"
            :width="360"
            :cancel-text="'取消'"
            :confirm-text="'岗位设置'"
            :title="'温馨提示'"
            :content="'当前未设置岗位，请点击下方岗位设置按钮，前往岗位设置页面创建岗位'"
            @close="showDialog = false"
            @emit="emitFun"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import showDialog from '@/components/common/dialog.vue';
export default {
    mixins: [back],
    components: {
        showDialog
    },
    data () {
        return {
            formData: {
                keyword: '',
                status: 99
            },
            statusList: [{value: 99, label: '全部'},{value: 1, label: '已启用'},{value: 0, label: '已禁用'}],
            showDialog: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: '财控管理'},{title: '平台财控计划'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/finance_control_official%5Cget_list', {
                page_id: page || this.page.now_page,
                keyword: this.formData.keyword,
                status: this.formData.status
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 创建计划
         */
        handleCreatePlan () {
            this.checkPostList().then(status => {
                if(status) {
                    this.handleCheckDetail('', 'creat');
                } else {
                    this.showDialog = true;
                }
            });
        },

        /**
         * @description 查询是否设置岗位
         */
        checkPostList () {
            return new Promise((resolve,reject) => {
                this.$post('/__local/system%5Cdepartment_position%5Cget_list',{
                    page_id: 1
                },resp=>{
                    if (resp.code == 1) {
                        const isData = resp.data.list.length ? true : false;

                        resolve(isData);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        /**
         * @description 跳转到岗位设置
         */
        emitFun () {
            this.$router.push({
                name: 'platformPostList'
            });
        },

        /**
         * @description 查看编辑详情
         * @param {String}  no     //编号 为空时是创建
         * @param {String}  type    //check:查看 edit:详情 creat：创建
         */
        handleCheckDetail (no = '', type) {
            this.$router.push({
                name: 'platformDetail',
                query: {
                    no: no,
                    type: type
                }
            });
        },

        /**
         * @description 禁用、启用
         * @param  {Object}   row   //表单数据
         */
        handleSet (row) {
            this.$post('/student/finance_control_official%5Cset_status',{
                control_no: row.control_no,
                status: row.status ? 0 : 1
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.platformControl {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    // width: 100%;
    // height: 100%;
    overflow: hidden;
    margin: 12px;
    .__nav {
        width: 100%;
        height: 67px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 35px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        margin-bottom: 24px;
        .__nav_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
    }
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding: 0 32px;
        .header_left {
            display: flex;
            align-items: center;
        }
        .__info {
            display: flex;
            align-items: center;
            margin-right: 32px;
            .__info_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
            }
        }
        .__left_button {
            flex: 1;
            height: 36px;
            background: rgba(32, 160, 255, 0.1);
            border-radius: 4px;
            border: 1px solid #20A0FF;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            // margin-right: 32px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            .el-icon-hand-iconjia {
                color: rgba(32, 160, 255, 1);
                margin-right: 10px;
                font-size: 14px;
                font-weight: 500;
            }
        }
        .__right_button {
            width: 128px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #20A0FF;
            text-align: center;
            line-height: 36px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .__wrap {
        width: calc(100% - 64px);
        margin-left: 32px;
        margin-bottom: 12px;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    /* 表单 */
    .scope-price {
        width: 50px;
        height: 50px;
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-button-left {
    margin-left: 40px;
}
.el-button-right {
    margin-right: 10px;
}
.__flex {
    display: flex;
    align-items: center;
    .__flex_status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
    }
}
</style>
<style lang="less">
    .platformControl{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>